<template>
	<view class="h-full">
		<uv-skeleton rows="10" :loading="firstLoading" rowsHeight="30px" title>
			<view class="full">
				<scroll-view scroll-y @scrolltolower="scrolltolower" @scroll="scroll" :scroll-top="scrollTop">
					<view class="content">
						<view class="full">
							<uv-notice-bar text="严正声明：全新手机租赁服务暂不对18岁及以下用户提供，建议您理性消费!" speed="100" duration="2000"
								:color="app.globalData.primaryColor"></uv-notice-bar>
						</view>
						<uv-search v-model="searchValue" @search="search" @custom="search" bgColor="white"
							:showAction="true" placeholder="猜你想搜：iphone15" actionText="搜索"
							:animation="true"></uv-search>
						<Grid :lists="dataInfo?.cate" @click="gridOnclick" />
						<!-- <uni-swiper-dot :info="data.banner" :current="current" field="content" mode="default" class="w-full"> -->
						<swiper class="swiper-box" @change="change" autoplay circular>
							<swiper-item v-for="(item, index) in dataInfo?.banner" :key="index">
								<img class="nut-swiper-img" :src="item.img" @click="toOtherPage(item.rule)" />
							</swiper-item>
						</swiper>
						<!-- </uni-swiper-dot> -->
						<view class="box">
							<uv-tabs :list="tabs" :current="tabsIndex" keyName="text"
								:lineColor="app.globalData.primaryColor" @change="tabsChange"
								:activeStyle="activeStyle"></uv-tabs>
						</view>
						<goodsList ref="goodsListRef" :defaultRequest="false" />
					</view>
					<view @click="backToTop">
						<uv-back-top :scroll-top="scrollTop" bottom="60"></uv-back-top>
					</view>
				</scroll-view>
			</view>
		</uv-skeleton>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onPullDownRefresh,
		onPageScroll,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		nextTick,
		toRaw,
	} from 'vue'
	const app = getApp()
	const goodsListRef = ref(null)
	const indexStorage = uni.getStorageSync('indexStorage')
	const firstLoading = ref(indexStorage?.indexStorage || true)
	const dataInfo = ref(indexStorage?.dataInfo || {})
	const tabsIndex = ref(0)
	const activeStyle = {
		color: '#303133',
		fontWeight: 'bold',
		transform: 'scale(1.05)'
	}
	const tabs = ref(indexStorage?.tabs || [])
	const tabsDefault = [{
		id: 0,
		ishome: -1,
		text: "首页推荐",
	}]
	const platform_cateids = ref(0)
	const setLists = () => {
		goodsListRef.value?.setLists(toRaw(dataInfo.value?.home_goods))
	}
	const getData = (callback) => {
		app.get('api.auth.center/getshopindex').then(res => {
			firstLoading.value = false
			dataInfo.value = res
			tabs.value = tabsDefault.concat(res?.cate_bottom)
			app.globalData.primaryColor = res.shop_info.app_color
			uni.setTabBarStyle({
				selectedColor: res.shop_info.app_color,
			})
			uni.setStorageSync("phoneNumber", res.shop_info.miniprogram_phone);
			uni.setStorage({
				key: "indexStorage",
				data: {
					dataInfo: dataInfo.value,
					tabs: tabs.value,
					firstLoading: false,
				}
			});
			setTimeout(() => {
				tabsIndex.value == 0 && setLists()
			}, 500);
			callback && callback()
		}).catch(error => {
			firstLoading.value = false
			callback && callback()
		})
	}
	const scrolltolower = () => {
		goodsListRef.value.getData({
			platform_cateids: platform_cateids.value
		})
	}
	onLoad(() => {
		tabsIndex.value == 0 && setLists()
		console.log(window.getMetaInfo())
		getData()
	})
	onPullDownRefresh(() => {
		app.vibrate()
		setTimeout(() => {
			getData(uni.stopPullDownRefresh)
			tabsIndex.value == 0 ? setLists() : goodsListRef.value.search({
				platform_cateids: platform_cateids.value
			})
		}, 300);
	})
	onReachBottom(() => {
		scrolltolower()
	})
	onPageScroll((e) => {
		scrollTop.value = e?.scrollTop;
	})
	const scrollTop = ref(0)
	const scroll = (e) => {
		scrollTop.value = e?.detail.scrollTop;
	}
	const backToTop = () => {
		scrollTop.value = 0;
	}
	const toGoodsLists = (value, val) => {
		uni.navigateTo({
			url: '/pages/goodsLists/goodsLists' + uni.$uv.queryParams(value),
			success: function(res) {
				// 通过eventChannel向被打开页面传送数据
				val && res.eventChannel.emit('setsearchValue', val)
			}
		})
	}
	const gridOnclick = function(value) {
		app.vibrate()
		toGoodsLists({
			platform_cateids: value.id
		}, value.text)
	}
	const toOtherPage = function(value) {
		app.vibrate()
		toGoodsLists({}, " ")
	}

	const searchValue = ref(null)
	const search = function() {
		app.vibrate()
		if (searchValue.value) {
			toGoodsLists({
				name: searchValue.value
			}, searchValue.value)
		}
	};
	const current = ref(0)
	const change = function(e) {
		current.value = e.detail.current;
	}
	const tabsChange = (value) => {
		tabsIndex.value = value.index
		app.vibrate()
		platform_cateids.value = value.id
		if (value.id == tabs.value[0].id) {
			setLists()
		} else {
			goodsListRef.value.search({
				platform_cateids: value.id
			})
		}
	}
</script>

<style lang="scss" scoped>
	.h-full>uni-view {
		height: 100%;
	}

	.full {
		width: 100%;
		height: 100%;
		overflow: auto;

		&>uni-scroll-view {
			height: 100%;
		}
	}

	::v-deep {
		.nut-skeleton {
			width: -webkit-fill-available;
			padding: 10px;
			height: 100%;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 10px;

		::v-deep.nut-tab-pane {
			padding: 0 !important;
			margin-top: 10px !important;
			background-color: transparent !important;
		}

		::v-deep.nut-tabs__content {
			display: none;
		}
	}


	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.uni-swiper__warp,
	.swiper-box {
		width: 100%;
		height: 100px;
		border-radius: $uni-border-radius-lg;
	}

	::v-deep.uni-swiper-wrapper,
	.nut-swiper-img {
		width: 100%;
		height: 100%;
		border-radius: $uni-border-radius-lg;
	}

	.nut-swiper-img:active {
		transform: scale(0.98);
	}
</style>